import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import { NButton } from 'naive-ui'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const upstreamColumnsRef = ref({
    upstreamColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })
  const downstreamColumnsRef = ref({
    downstreamColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const upstreamColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.datasourceType'),
        key: 'sourceDbType',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.datasourceName'),
        key: 'sourceDatasourceName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.dbName'),
        key: 'sourceDbName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.table'),
        key: 'sourceTableName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.relevanceTask'),
        key: 'taskName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](1),
        render: (rowData: any, unused: number) => {
          return [
            h(
              NButton,
              {
                onClick: () => void onCallback({ rowData }, 'delRelated'),
                quaternary: true,
                type: 'error',
                size: 'small'
              },
              t('common.delete')
            )
          ]
        }
      }
    ] as TableColumns

    upstreamColumnsRef.value = {
      upstreamColumns,
      tableWidth: calculateTableWidth(upstreamColumns)
    }

    const downstreamColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.datasourceType'),
        key: 'targetDbType',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.datasourceName'),
        key: 'targetDatasourceName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.dbName'),
        key: 'targetDbName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.table'),
        key: 'targetTableName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.relevanceTask'),
        key: 'taskName',
        lassName: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](1),
        render: (rowData: any, unused: number) => {
          return [
            h(
              NButton,
              {
                onClick: () => void onCallback({ rowData }, 'delRelated'),
                quaternary: true,
                type: 'error',
                size: 'small'
              },
              t('common.delete')
            )
          ]
        }
      }
    ] as TableColumns

    downstreamColumnsRef.value = {
      downstreamColumns,
      tableWidth: calculateTableWidth(downstreamColumns)
    }
  }

  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    upstreamColumnsRef,
    downstreamColumnsRef,
    createColumns
  }
}
